﻿<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>也许有用 技术论坛 - MAYBE IT WORKS</title>
  <link th:href="@{/show/css/bootstrap.min.css}" type="text/css" rel="stylesheet">
  <link th:href="@{/show/css/style.css}" type="text/css" rel="stylesheet">
  <link type="text/css" th:href="@{/show/css/nprogress.css}" rel="stylesheet">
  <!--[if lt IE 9]>
  <script src="js/html5shiv.min.js" type="text/javascript"></script>
  <script src="js/respond.min.js" type="text/javascript"></script>
  <script src="js/selectivizr-min.js" type="text/javascript"></script>
  <![endif]-->
  <link rel="icon" th:href="@{/show/images/icon/favicon.ico}" type="image/x-icon"/>
  <link rel="bookmark" th:href="@{/show/images/icon/favicon.ico}" type="image/x-icon"/>
  <!--
  <link rel="apple-touch-icon-precomposed" th:href="@{/show/images/icon/icon.png}">
  <link rel="shortcut icon" type="image/vnd.microsoft.icon" th:href="@{/show/images/icon/favicon.ico}">-->
  <meta name="Keywords" content="" />
  <meta name="description" content="" />
  <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
  <link rel="stylesheet" th:href="@{/show/css/imgSizeSmall.css}">
  <script th:src="@{/layui/layui.js}"></script>
  <script type="text/javascript">
//判断浏览器是否支持HTML5
/*window.onload = function() {
	if (!window.applicationCache) {
		window.location.href="ie.html";
	}
}*/
</script>
</head>

<body>
<section class="container user-select">
  <header th:replace="~{show/main :: leftbar}"></header>
  <!--/超小屏幕可见-->
  <div class="content-wrap"><!--内容-->
    <div class="content">
      <div class="content-block about-content">
        <h2 class="title"><strong>关于也许有用</strong></h2>
        <p class="line-title">想要深入了解<span>也许有用？</span></p>
        <p>也许有用技术博客社区的		内容大概为网站前端和后端的技术，包括内容管理系统，文章大量的原创内容，也有其他网站转载过来的精品，如果我遇到好的资源会第一时间发布在本博客社区内，也欢迎大家入住本社区。</p>
        <p>大家如果有好的文章好的技术请不要吝啬，欢迎前来发布！</p>
        <p>如果有什么疑问或者需要投稿的请使用下方联系方式，或者留言来告诉我，收到后第一时间回复。</p>
      </div>
      <div class="content-block contact-content">
        <h2 class="title"><strong>联系也许有用</strong></h2>
        <p><span>站长QQ：</span><a href="tencent://message/?uin=1433304356\">143 330 4356</a></p>
        <p><span>交流群：</span><a href="">641515733</a></p>
        <p><span>站长信箱：</span><a href="mailto:zhao20210906@163.com">zhao20210906@163.com</a></p>
      </div>
      <div class="content-block comment">
        <h2 class="title"><strong>添加留言</strong></h2>
        <form class="form-inline" id="comment-form">
          <div class="comment-title">
            <div class="form-group">
              <label for="name">姓名：</label>
              <input type="text" name="name" class="form-control" id="name" placeholder="也许有用">
            </div>
            <div class="form-group">
              <label for="email">邮箱：</label>
              <input type="email" name="email" class="form-control" id="email" placeholder="zhao20210906@163.com">
            </div>
          </div>
          <div class="comment-form">
            <textarea placeholder="在此处填写留言内容" id="content" name="content"></textarea>
            <div class="comment-form-footer">
              <div class="comment-form-text">请先 <a href="javascript:;">登录</a> 或 <a href="javascript:;">注册</a>，也可匿名留言 </div>
              <div class="comment-form-btn">
                <button type="button" id="send_btn" class="btn btn-default btn-comment">提交留言</button>
              </div>
            </div>
          </div>
        </form>
        <div class="content-block comment-content">
          <h2 class="title"><strong>最新留言</strong></h2>
          <ul id="feedBackList">
            <li th:each="feedBack:${feedBacks}"><span class="text"><strong th:text="${feedBack.getName()}">异清轩站长</strong> (<font th:text="${#dates.format(feedBack.getCreateTime(),'yyyy-MM-dd HH:mm:ss')}">2015-10-18</font>) 留言：<br />
              <font th:text="${feedBack.getContent()}">欢迎来到异清轩技术博客，在这里可以看到网站前端和后端的技术等在这里可以看到网站前端和后端的技术等在这里可以看到网站前端和后端的技术等 ...</font></span></li>
<!--            <li><span class="text"><strong>异清轩编辑</strong> (2015-10-18) 留言：<br />-->
<!--              欢迎来到异清轩技术博客，在这里可以看到网站前端和后端的技术等 ...</span></li>-->
<!--            <li><span class="text"><strong>令狐冲</strong> (2015-10-18) 留言：<br />-->
<!--              欢迎来到异清轩技术博客，在这里可以看到网站前端和后端的技术等在这里可以看到网站前端和后端的技术等在这里可以看到网站前端和后端的技术等在这里可以看到网站前端和后端的技术等在这里可以看到网站前端和后端的技术等在这里可以看到网站前端和后端的技术等 ...</span></li>-->
<!--            <li><span class="text"><strong>任盈盈</strong> (2015-10-18) 留言：<br />-->
<!--              欢迎来到异清轩技术博客，在这里可以看到网站前端和后端的技术等在这里可以看到网站前端和后端的技术等在这里可以看到网站前端和后端的技术等 ...欢迎来到异清轩技术博客，在这里可以看到网站前端和后端的技术等在这里可以看到网站前端和后端的技术等在这里可以看到网站前端和后端的技术等 ...欢迎来到异清轩技术博客，在这里可以看到网站前端和后端的技术等在这里可以看到网站前端和后端的技术等在这里可以看到网站前端和后端的技术等 ...</span></li>-->
<!--            <li><span class="text"><strong>异清轩站长</strong> (2015-10-18) 留言：<br />-->
<!--              欢迎来到异清轩技术博客，在这里可以看到网站前端和后端的技术等 ...</span></li>-->
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!--/内容-->
  <aside th:replace="~{show/main :: rightbar}"><!--右侧>992px显示-->

  </aside>
  <!--/右侧>992px显示-->
  <footer th:replace="~{show/main :: bottombar}"></footer>
  </section>
<div><a href="javascript:;" class="gotop" style="display:none;"></a></div>
<!--/返回顶部-->
<script th:src="@{/show/js/jquery-2.1.4.min.js}" type="text/javascript"></script>
<script th:src="@{/show/js/nprogress.js}" type="text/javascript" ></script>
<script th:src="@{/show/js/bootstrap.min.js}" type="text/javascript"></script>
<script th:src="@{/show/js/comm/right.js}" type="text/javascript"></script>
<script type="text/javascript">
//页面加载
$('body').show();
$('.version').text(NProgress.version);
NProgress.start();
setTimeout(function() { NProgress.done(); $('.fade').removeClass('out'); }, 1000);
//返回顶部按钮
$(function(){
	$(window).scroll(function(){
		if($(window).scrollTop()>100){
			$(".gotop").fadeIn();	
		}
		else{
			$(".gotop").hide();
		}
	});
	$(".gotop").click(function(){
		$('html,body').animate({'scrollTop':0},500);
	});
});
//提示插件启用
$(function () {
  $('[data-toggle="popover"]').popover();
});
$(function () {
	$('[data-toggle="tooltip"]').tooltip();
});
//鼠标滑过显示 滑离隐藏
$(function(){
	$(".carousel").hover(function(){
		$(this).find(".carousel-control").show();
	},function(){
		$(this).find(".carousel-control").hide();
	});
});
$(function(){
	$(".hot-content ul li").hover(function(){
		$(this).find("h3").show();
	},function(){
		$(this).find("h3").hide();
	});
});
//页面元素智能定位
$.fn.smartFloat = function() { 
	var position = function(element) { 
		var top = element.position().top; //当前元素对象element距离浏览器上边缘的距离 
		var pos = element.css("position"); //当前元素距离页面document顶部的距离
		$(window).scroll(function() { //侦听滚动时 
			var scrolls = $(this).scrollTop(); 
			if (scrolls > top) { //如果滚动到页面超出了当前元素element的相对页面顶部的高度 
				if (window.XMLHttpRequest) { //如果不是ie6 
					element.css({ //设置css 
						position: "fixed", //固定定位,即不再跟随滚动 
						top: 0 //距离页面顶部为0 
					}).addClass("shadow"); //加上阴影样式.shadow 
				} else { //如果是ie6 
					element.css({ 
						top: scrolls  //与页面顶部距离 
					});     
				} 
			}else { 
				element.css({ //如果当前元素element未滚动到浏览器上边缘，则使用默认样式 
					position: pos, 
					top: top 
				}).removeClass("shadow");//移除阴影样式.shadow 
			} 
		}); 
	}; 
	return $(this).each(function() { 
		position($(this));                          
	}); 
}; 
//启用页面元素智能定位
$(function(){
	$("#search").smartFloat();
});
//异步加载更多内容
jQuery("#pagination a").on("click", function ()
{
    var _url = jQuery(this).attr("href");
    var _text = jQuery(this).text();
    jQuery(this).attr("href", "javascript:viod(0);");
    jQuery.ajax(
    {
        type : "POST",
        url : _url,
        success : function (data)
        {
            //将返回的数据进行处理，挑选出class是news-list的内容块
            result = jQuery(data).find(".row .news-list");
            //newHref获取返回的内容中的下一页的链接地址
            nextHref = jQuery(data).find("#pagination a").attr("href");
            jQuery(this).attr("href", _url);
            if (nextHref != undefined)
            {
                jQuery("#pagination a").attr("href", nextHref);
            }
			else
            {
                jQuery("#pagination a").html("下一页没有了").removeAttr("href")
            }
            // 渐显新内容
            jQuery(function ()
            {
                jQuery(".row").append(result.fadeIn(300));
                jQuery("img").lazyload(
                {
                    effect : "fadeIn"
                });
            });
        }
    });
    return false;
});
layui.use('layer', function(){
  var layer = layui.layer;
});
$(function(){
  //时间格式转换函数：
  Date.prototype.format = function(fmt) {
    var o = {
      "M+" : this.getMonth()+1,                 //月份
      "d+" : this.getDate(),                    //日
      "h+" : this.getHours(),                   //小时
      "m+" : this.getMinutes(),                 //分
      "s+" : this.getSeconds(),                 //秒
      "q+" : Math.floor((this.getMonth()+3)/3), //季度
      "S"  : this.getMilliseconds()             //毫秒
    };
    if(/(y+)/.test(fmt)) {
      fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
    }
    for(var k in o) {
      if(new RegExp("("+ k +")").test(fmt)){
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
      }
    }
    return fmt;
  }
  $("#send_btn").click(function () {
    $.ajax({
      type:'post',
      url:'/feedback/updateFeedback',
      data:$("#comment-form").serialize(),
      dataType: "json",
      async: false,
      success:function (data) {
          console.log(data)
          if (data.code == 200){
            var txt = '<li><span class="text"><strong>'+data.data.name+'</strong> ('+new Date(data.data.createTime).format("yyyy-MM-dd")+') 留言：<br />'+data.data.content+'</span></li>';
            $("#feedBackList").prepend(txt);
            $("#name").val("")
            $("#email").val("")
            $("#content").val("")
          }else {
            layui.use('layer',function(){
              layer=layui.layer;
              layer.msg(data.msg,{
                icon:2
              });
            })
          }
      }
    });
  })
})
</script>
</body>
</html>
